<%inherit file="appliance_base.html" />

<%block name="innav">
<li><a href="${ reverse_url('admin:appliance') }">${ _("Appliance") }</a> <span class="divider">/</span></li>
<li><a href="${ reverse_url('admin:appliance') }?id=${ APPLIANCE.id }">${ APPLIANCE.name }</a></li>
</%block>

<%block name="submain">

<div class="row-fluid">

  <div class="span3">

    <div>
      <img class="ly-logo-large" src="${ APPLIANCE.logourl }"/>
    </div>

    <br>
    <div>
      <a class="btn btn-primary" href="${ reverse_url('admin:appliance:edit') }?id=${ APPLIANCE.id }"><i class="icon-edit"></i> ${ _("Edit") }</a>
      <a class="btn" href="${ APPLIANCE.download_url }" target="_blank">${ _("Download") }</a>
      <a class="btn btn-danger" href="${ reverse_url('appliance:delete', APPLIANCE.id) }" onclick="deleteApplianceConfirm( this ); return false;">${ _("Delete") }</a>
    </div>

  </div>

  <div class="span9">

    <div class="ly-item-title">${ _("Screenshot") }</div>
    <div class="ly-item-body">
      <p>
        <a class="btn btn-primary ly-async-opt" href="${ reverse_url('appliance:screenshot:add') }?appliance_id=${ APPLIANCE.id }">${ _("Add Screenshot") }</a>
        <a class="btn btn-primary ly-async-opt" href="${ reverse_url('appliance:screenshot:management') }?appliance_id=${ APPLIANCE.id }">${ _("Management") }</a>
      </p>

      % if len(APPLIANCE.screenshots):
      <div id="appliance-thumnails">
        <div class="carousel slide" id="myCarousel">
          <div class="carousel-inner">
            % for INDEX, S in enumerate(APPLIANCE.screenshots):
            % if INDEX == 0:
            <div class="item active">
            % else:
            <div class="item">
            % endif
              <a href="${ S.url }"><img src="${ S.thumb_url }"></a>
            </div>
            % endfor
          </div>
          <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
          <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
        </div>
      </div>
      % endif
    </div>

    <div class="ly-item-title">${ _("Base Information") }</div>

    <div class="ly-item-body">
      <table class="table table-bordered table-striped">
        <tbody>
          <tr>
            <th>${ _("ID") }</th>
            <td>${ APPLIANCE.id }</td>
          </tr>
          <tr>
            <th>${ _("Name") }</th>
            <td>${ APPLIANCE.name }</td>
          </tr>
          <tr>
            <th>${ _("Checksum") }</th>
            <td>${ APPLIANCE.checksum }</td>
          </tr>
          <tr>
            <th>${ _("Size") }</th>
            <td>${ human_size(APPLIANCE.filesize) }</td>
          </tr>
          <tr>
            <th>${ _("Owner") }</th>
            <td>
              <a href="${ reverse_url('admin:user') }?id=${ APPLIANCE.user.id }">${ APPLIANCE.user.username }</a>
              <a class="btn" href="${ reverse_url('admin:appliance:change_user') }?id=${ APPLIANCE.id }"><i class="icon-edit"></i> ${ _("Change User") }</a>
            </td>
          </tr>
          <tr>
            <th>${ _("Catalog") }</th>
            <td>
              <a href="${ reverse_url('admin:appliance') }?catalog=${ APPLIANCE.catalog_id }" title="${ _("View all appliances in this catalog.") }" target="_blank">${ APPLIANCE.catalog_name }</a>
            </td>
          </tr>
          <tr>
            <th>${ _("Instance") }</th>
            <td>
              % if APPLIANCE.instances:
              <a class="ly-count" href="${ reverse_url('admin:instance') }?aid=${ APPLIANCE.id }">${ len(APPLIANCE.instances) }</a>
              % endif
            </td>
          </tr>
          <tr>
            <th>${ _("Created") }</th>
            <td>${ ftime(APPLIANCE.created) }</td>
          </tr>
          <tr>
            <th>${ _("Updated") }</th>
            <td>${ ftime(APPLIANCE.updated) }</td>
          </tr>
        </tbody>
      </table>
    </div>


    <div class="ly-item-title">${ _("Summary") }</div>
    <div class="ly-item-body">
      % if APPLIANCE.summary:
      ${ APPLIANCE.summary }
      % else:
      ${ _("No summary yet !") }
      % endif
    </div>


    <div class="ly-item-title">${ _("Description") }</div>
    <div class="ly-item-body">
      % if APPLIANCE.description:
      ${ APPLIANCE.description_html }
      % else:
      ${ _("No description yet !") }
      % endif
    </div>

  </div>

</div>

## Normal Ajax option
<div style="display:none;" id="ly-async-window" class="modal hide fade">
  <div class="text-center">
    <p>${ _("Please waiting") }</p>
    <img src="${ static_url('image/running.gif') }" />
  </div>
</div>
<div style="display:none;" id="ly-async-500">
  <div class="modal-header">
    <h1>${ _("Internal Server Error") }</h1>
  </div>
  <div class="modal-body">
    <p class="statusText"></p>
    <div class="notification-help">
      <p class="subtitle"><i class="icon-lightbulb"></i> ${ _("If you have any questions, you can contact the admin by following method:") }</p>
   </div>
  </div>
  <div class="modal-footer">
    <input type="button" class="btn" value="Close" data-dismiss="modal">
  </div>
</div>

<script type="text/javascript">
$( function() {
  ly_async_opt()
});
</script>

</%block>
